import { Draw } from "../../../Draw/Draw";

/** 拖拽进入 - 实现排序 */
export function imageBoxDragEnter(e: DragEvent, draw: Draw) {
  //  这里注意触发的元素哈 - 始终找到 imageBox 才行
  const target = <HTMLDivElement>e.target;
  if (target.classList.contains("thumb-draging")) return;
  // 获取 thumb-draging 元素的 index，获取当前的 index，来判断拖拽上下方向
  const root = draw.getRootBox();
  const thumbBox = root.querySelector(".konva-root-container-thumb")!;

  // 父元素在 thumbBox 中,需要根据这个获取顺序，因为拖拽过程中  顺序是变得哦
  const childrenList = [...thumbBox.children];

  const dragingBox = thumbBox.querySelector(".thumb-draging")!;
  const dragingBoxParent = <HTMLElement>dragingBox.parentNode;
  const dragingIndex = childrenList.indexOf(dragingBoxParent);

  // 被进入元素 index
  const enterParent = <HTMLElement>target.parentNode;
  const enterIndex = childrenList.indexOf(enterParent);

  try {
    if (dragingIndex > enterIndex) {
      thumbBox.insertBefore(dragingBoxParent, enterParent);
    } else {
      thumbBox.insertBefore(dragingBoxParent, enterParent.nextElementSibling);
    }
  } catch (error) {
    console.log(error);
  }
}
